<!--
 * @Description: 传入record数据，通过判断record.type，来渲染对应的组件
 * @Author: lsb
 * @Date: 2022-04-10 
 * @LastEditors: lsb
 * @LastEditTime: 2022-04-10
 -->
<template>
<svg xmlns="http://www.w3.org/2000/svg"  version="1.1"  ref="svg"   >
 <g :id="item.id"  v-if="item.type === 'startNode'" >
 <ellipse :cx="item.position.x" :cy="item.position.y" :rx="item.ellipse.rx" :ry="item.ellipse.ry"
  v-bind:style="computedEllipseStyle(item)"/>
 <text  :x="item.position.x-12" :y="item.position.y+5"  :fill="item.line.color" v-bind:transform="computedRotate(item)">{{item.label}}</text>       
 </g>
 <g id="selectorGroup0" transform="" display="inline" v-if="item.type === 'startNode' && item.iselected==='1'">
<path id="selectedBox0" fill="none" stroke="#4F80FF" shape-rendering="crispEdges" style="pointer-events:none" v-bind:d="computeEllipseSelectedRect(item)"></path>
<g display="inline" class="draggable">
<rect id="selectorGrip_resize_nw" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:nw-resize" pointer-events="all" v-bind:x="computeEllipseSelectedRectHandle('lefttop','x',item)" v-bind:y="computeEllipseSelectedRectHandle('lefttop','y',item)"></rect>
<rect id="selectorGrip_resize_n" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:n-resize" pointer-events="all" v-bind:x="computeEllipseSelectedRectHandle('middletop','x',item)" v-bind:y="computeEllipseSelectedRectHandle('middletop','y',item)"></rect>
<rect id="selectorGrip_resize_ne" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:ne-resize" pointer-events="all" v-bind:x="computeEllipseSelectedRectHandle('righttop','x',item)" v-bind:y="computeEllipseSelectedRectHandle('righttop','y',item)"></rect>
<rect id="selectorGrip_resize_e" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:e-resize" pointer-events="all" v-bind:x="computeEllipseSelectedRectHandle('rightmiddle','x',item)" v-bind:y="computeEllipseSelectedRectHandle('rightmiddle','y',item)"></rect>
<rect id="selectorGrip_resize_se" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:se-resize" pointer-events="all" v-bind:x="computeEllipseSelectedRectHandle('rightdown','x',item)" v-bind:y="computeEllipseSelectedRectHandle('rightdown','y',item)"></rect>
<rect id="selectorGrip_resize_s" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:s-resize" pointer-events="all" v-bind:x="computeEllipseSelectedRectHandle('middledown','x',item)" v-bind:y="computeEllipseSelectedRectHandle('middledown','y',item)"></rect>
<rect id="selectorGrip_resize_sw" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:sw-resize" pointer-events="all" v-bind:x="computeEllipseSelectedRectHandle('leftdown','x',item)" v-bind:y="computeEllipseSelectedRectHandle('leftdown','y',item)"></rect>
<rect id="selectorGrip_resize_w" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:w-resize" pointer-events="all" v-bind:x="computeEllipseSelectedRectHandle('leftmiddle','x',item)" v-bind:y="computeEllipseSelectedRectHandle('leftmiddle','y',item)"></rect>
<rect id="selectorGrip_move" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:move" pointer-events="all" v-bind:x="computeEllipseSelectedRectHandle('center','x',item)" v-bind:y="computeEllipseSelectedRectHandle('center','y',item)"></rect>
</g></g>

 <g :id="item.id"  v-if="item.type === 'loopNode'" >
  <path  v-bind:d="computedLoopNodePathD(item)" :stroke="item.line.color"
  :stroke-width="item.line.width" fill="none"  />  
  <path v-bind:d="computedArrowPathD(item)" stroke-width="1" :fill="item.line.color"/>
 </g>
  <g id="selectorGroup0" transform="" display="inline" v-if="item.type === 'loopNode' && item.iselected==='1'">
<path id="selectedBox0" fill="none" stroke="#4F80FF" shape-rendering="crispEdges" style="pointer-events:none" v-bind:d="computeLoopNodeSelectedRect(item)"></path>
<g display="inline">
<rect id="selectorGrip_resize_nw" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:nw-resize" pointer-events="all" v-bind:x="computeLoopNodeSelectedRectHandle('lefttop','x',item)" v-bind:y="computeLoopNodeSelectedRectHandle('lefttop','y',item)"></rect>
<rect id="selectorGrip_resize_n" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:n-resize" pointer-events="all" v-bind:x="computeLoopNodeSelectedRectHandle('middletop','x',item)" v-bind:y="computeLoopNodeSelectedRectHandle('middletop','y',item)"></rect>
<rect id="selectorGrip_resize_ne" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:ne-resize" pointer-events="all" v-bind:x="computeLoopNodeSelectedRectHandle('righttop','x',item)" v-bind:y="computeLoopNodeSelectedRectHandle('righttop','y',item)"></rect>
<rect id="selectorGrip_resize_e" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:e-resize" pointer-events="all" v-bind:x="computeLoopNodeSelectedRectHandle('rightmiddle','x',item)" v-bind:y="computeLoopNodeSelectedRectHandle('rightmiddle','y',item)"></rect>
<rect id="selectorGrip_resize_se" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:se-resize" pointer-events="all" v-bind:x="computeLoopNodeSelectedRectHandle('rightdown','x',item)" v-bind:y="computeLoopNodeSelectedRectHandle('rightdown','y',item)"></rect>
<rect id="selectorGrip_resize_s" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:s-resize" pointer-events="all" v-bind:x="computeLoopNodeSelectedRectHandle('middledown','x',item)" v-bind:y="computeLoopNodeSelectedRectHandle('middledown','y',item)"></rect>
<rect id="selectorGrip_resize_sw" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:sw-resize" pointer-events="all" v-bind:x="computeLoopNodeSelectedRectHandle('leftdown','x',item)" v-bind:y="computeLoopNodeSelectedRectHandle('leftdown','y',item)"></rect>
<rect id="selectorGrip_resize_w" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:w-resize" pointer-events="all" v-bind:x="computeLoopNodeSelectedRectHandle('leftmiddle','x',item)" v-bind:y="computeLoopNodeSelectedRectHandle('leftmiddle','y',item)"></rect>
<rect id="selectorGrip_move" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:move" pointer-events="all" v-bind:x="computeLoopNodeSelectedRectHandle('center','x',item)" v-bind:y="computeLoopNodeSelectedRectHandle('center','y',item)"></rect>
</g>
</g>

  <g :id="item.id"  v-if="item.type === 'decideNode'" >
 <polygon v-bind:points="computedDecideNodePoints(item)" 
  v-bind:style="computedPolygonStyle(item)"/>
 <text  v-bind:x="computedTextPosition(item,'x')" v-bind:y="computedTextPosition(item,'y')"  alignment-baseline="text-before-edge"  :fill="item.line.color" v-bind:transform="computedRotate(item)" :font-size="item.font.size" :font-family="item.font.family" >{{item.label}}</text>       
 </g>
   <g id="selectorGroup0" transform="" display="inline" v-if="item.type === 'decideNode' && item.iselected==='1'">
<path id="selectedBox0" fill="none" stroke="#4F80FF" shape-rendering="crispEdges" style="pointer-events:none" v-bind:d="computeDecideNodeSelectedRect(item)"></path>
<g display="inline">
<rect id="selectorGrip_resize_nw" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:nw-resize" pointer-events="all" v-bind:x="computeDecideNodeSelectedRectHandle('lefttop','x',item)" v-bind:y="computeDecideNodeSelectedRectHandle('lefttop','y',item)"></rect>
<rect id="selectorGrip_resize_n" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:n-resize" pointer-events="all" v-bind:x="computeDecideNodeSelectedRectHandle('middletop','x',item)" v-bind:y="computeDecideNodeSelectedRectHandle('middletop','y',item)"></rect>
<rect id="selectorGrip_resize_ne" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:ne-resize" pointer-events="all" v-bind:x="computeDecideNodeSelectedRectHandle('righttop','x',item)" v-bind:y="computeDecideNodeSelectedRectHandle('righttop','y',item)"></rect>
<rect id="selectorGrip_resize_e" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:e-resize" pointer-events="all" v-bind:x="computeDecideNodeSelectedRectHandle('rightmiddle','x',item)" v-bind:y="computeDecideNodeSelectedRectHandle('rightmiddle','y',item)"></rect>
<rect id="selectorGrip_resize_se" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:se-resize" pointer-events="all" v-bind:x="computeDecideNodeSelectedRectHandle('rightdown','x',item)" v-bind:y="computeDecideNodeSelectedRectHandle('rightdown','y',item)"></rect>
<rect id="selectorGrip_resize_s" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:s-resize" pointer-events="all" v-bind:x="computeDecideNodeSelectedRectHandle('middledown','x',item)" v-bind:y="computeDecideNodeSelectedRectHandle('middledown','y',item)"></rect>
<rect id="selectorGrip_resize_sw" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:sw-resize" pointer-events="all" v-bind:x="computeDecideNodeSelectedRectHandle('leftdown','x',item)" v-bind:y="computeDecideNodeSelectedRectHandle('leftdown','y',item)"></rect>
<rect id="selectorGrip_resize_w" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:w-resize" pointer-events="all" v-bind:x="computeDecideNodeSelectedRectHandle('leftmiddle','x',item)" v-bind:y="computeDecideNodeSelectedRectHandle('leftmiddle','y',item)"></rect>
<rect id="selectorGrip_move" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:move" pointer-events="all" v-bind:x="computeDecideNodeSelectedRectHandle('center','x',item)" v-bind:y="computeDecideNodeSelectedRectHandle('center','y',item)"></rect>
</g>

</g>
  <g :id="item.id"  v-if="item.type === 'endNode'" >
 <ellipse :cx="item.position.x" :cy="item.position.y" :rx="item.ellipse.rx" :ry="item.ellipse.ry"
  v-bind:style="computedEllipseStyle(item)"/>
 <text  :x="item.position.x-12" :y="item.position.y+5"  :fill="item.line.color" v-bind:transform="computedRotate(item)">{{item.label}}</text>       
 </g> 
  <g id="selectorGroup0" transform="" display="inline" v-if="item.type === 'endNode' && item.iselected==='1'">
<path id="selectedBox0" fill="none" stroke="#4F80FF" shape-rendering="crispEdges" style="pointer-events:none" v-bind:d="computeEllipseSelectedRect(item)"></path>
<g display="inline">
<rect id="selectorGrip_resize_nw" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:nw-resize" pointer-events="all" v-bind:x="computeEllipseSelectedRectHandle('lefttop','x',item)" v-bind:y="computeEllipseSelectedRectHandle('lefttop','y',item)"></rect>
<rect id="selectorGrip_resize_n" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:n-resize" pointer-events="all" v-bind:x="computeEllipseSelectedRectHandle('middletop','x',item)" v-bind:y="computeEllipseSelectedRectHandle('middletop','y',item)"></rect>
<rect id="selectorGrip_resize_ne" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:ne-resize" pointer-events="all" v-bind:x="computeEllipseSelectedRectHandle('righttop','x',item)" v-bind:y="computeEllipseSelectedRectHandle('righttop','y',item)"></rect>
<rect id="selectorGrip_resize_e" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:e-resize" pointer-events="all" v-bind:x="computeEllipseSelectedRectHandle('rightmiddle','x',item)" v-bind:y="computeEllipseSelectedRectHandle('rightmiddle','y',item)"></rect>
<rect id="selectorGrip_resize_se" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:se-resize" pointer-events="all" v-bind:x="computeEllipseSelectedRectHandle('rightdown','x',item)" v-bind:y="computeEllipseSelectedRectHandle('rightdown','y',item)"></rect>
<rect id="selectorGrip_resize_s" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:s-resize" pointer-events="all" v-bind:x="computeEllipseSelectedRectHandle('middledown','x',item)" v-bind:y="computeEllipseSelectedRectHandle('middledown','y',item)"></rect>
<rect id="selectorGrip_resize_sw" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:sw-resize" pointer-events="all" v-bind:x="computeEllipseSelectedRectHandle('leftdown','x',item)" v-bind:y="computeEllipseSelectedRectHandle('leftdown','y',item)"></rect>
<rect id="selectorGrip_resize_w" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:w-resize" pointer-events="all" v-bind:x="computeEllipseSelectedRectHandle('leftmiddle','x',item)" v-bind:y="computeEllipseSelectedRectHandle('leftmiddle','y',item)"></rect>
<rect id="selectorGrip_move" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:move" pointer-events="all" v-bind:x="computeEllipseSelectedRectHandle('center','x',item)" v-bind:y="computeEllipseSelectedRectHandle('center','y',item)"></rect>
</g></g>
  <g :id="item.id"  v-if="item.type === 'assignmentNode'" >
  <rect :x="item.position.x" :y="item.position.y" :rx="item.assignmentNode.rx" :ry="item.assignmentNode.rx" :width="item.assignmentNode.width" :height="item.assignmentNode.height"
   v-bind:style="computedAssignmentNodeStyle(item)" />
  <text v-bind:x="computedAssignmentNodeTextX(item)" v-bind:y="computedAssignmentNodeTextY(item)" alignment-baseline="text-before-edge" :fill="item.font.color">{{item.label}}</text> 
 </g>
  <g id="selectorGroup0" transform="" display="inline" v-if="item.type === 'assignmentNode' && item.iselected==='1'">
<path id="selectedBox0" fill="none" stroke="#4F80FF" shape-rendering="crispEdges" style="pointer-events:none" v-bind:d="computeAssignmentNodeSelectedRect(item)"></path>
<g display="inline">
<rect id="selectorGrip_resize_nw" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:nw-resize" pointer-events="all" v-bind:x="computeAssignmentNodeSelectedRectHandle('lefttop','x',item)" v-bind:y="computeAssignmentNodeSelectedRectHandle('lefttop','y',item)"></rect>
<rect id="selectorGrip_resize_n" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:n-resize" pointer-events="all" v-bind:x="computeAssignmentNodeSelectedRectHandle('middletop','x',item)" v-bind:y="computeAssignmentNodeSelectedRectHandle('middletop','y',item)"></rect>
<rect id="selectorGrip_resize_ne" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:ne-resize" pointer-events="all" v-bind:x="computeAssignmentNodeSelectedRectHandle('righttop','x',item)" v-bind:y="computeAssignmentNodeSelectedRectHandle('righttop','y',item)"></rect>
<rect id="selectorGrip_resize_e" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:e-resize" pointer-events="all" v-bind:x="computeAssignmentNodeSelectedRectHandle('rightmiddle','x',item)" v-bind:y="computeAssignmentNodeSelectedRectHandle('rightmiddle','y',item)"></rect>
<rect id="selectorGrip_resize_se" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:se-resize" pointer-events="all" v-bind:x="computeAssignmentNodeSelectedRectHandle('rightdown','x',item)" v-bind:y="computeAssignmentNodeSelectedRectHandle('rightdown','y',item)"></rect>
<rect id="selectorGrip_resize_s" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:s-resize" pointer-events="all" v-bind:x="computeAssignmentNodeSelectedRectHandle('middledown','x',item)" v-bind:y="computeAssignmentNodeSelectedRectHandle('middledown','y',item)"></rect>
<rect id="selectorGrip_resize_sw" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:sw-resize" pointer-events="all" v-bind:x="computeAssignmentNodeSelectedRectHandle('leftdown','x',item)" v-bind:y="computeAssignmentNodeSelectedRectHandle('leftdown','y',item)"></rect>
<rect id="selectorGrip_resize_w" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:w-resize" pointer-events="all" v-bind:x="computeAssignmentNodeSelectedRectHandle('leftmiddle','x',item)" v-bind:y="computeAssignmentNodeSelectedRectHandle('leftmiddle','y',item)"></rect>
<rect id="selectorGrip_move" width="8" height="8" fill="#4F80FF" stroke="rgba(0,0,0,0)" style="cursor:move" pointer-events="all" v-bind:x="computeAssignmentNodeSelectedRectHandle('center','x',item)" v-bind:y="computeAssignmentNodeSelectedRectHandle('center','y',item)"></rect>
</g></g>

 <g :id="item.id"  v-if="item.type === 'lineNode'" >
  <path  v-bind:d="computedLineNodePathD(item)" :stroke="item.line.color"
  :stroke-width="item.line.width" fill="none"  />  
  <path v-bind:d="computedLineNodeArrowPathD(item)" stroke-width="1" :fill="item.line.color" v-bind:transform="computeLineRotate(item)"/>
 </g>
 <g id="selectorGroup0" transform="" display="inline" v-if="item.type === 'lineNode' && item.iselected==='1'">
<g display="inline">
<rect v-for="item1 in item.handlerList" :key="item1.id" width="8" height="8" :fill="item1.fill" stroke="rgba(0,0,0,0)" :style="item1.cursor" pointer-events="all" :x="item1.x" :y="item1.y"></rect>

</g>
</g> 
 </svg>
 
 </template>
<script>
import rotate from '../assets/rotate.png'
export default {
  name: "PublicSvgItem",
  props: {
    // svg 对象
    item: {
      type: Object,
      required: true
    },
	design: {
	  type:Number,
	  required: true
	}
  },
  async  mounted() {
     // 将svgClick方法绑定到window下面，提供给外部调用
    window["handleClick"] = (evt, id) => {
      this.svgClick(evt, id);
    };

    //初始化默认值
	this.inputCtrlVal = this.item.value;
	this.ctrlId = this.item.id;
	//this.timer = setInterval(this.changeProperty, 500);
	
	this.oSvg = document.getElementById(this.item.id);
	//绑定鼠标事件
	//this.oSvg.onClick= this.svgOnClick;
	this.oSvg.setAttribute("onclick", "handleClick(evt,'"+this.item.id+"')");

	if(this.item.viewBox){
	
	 this.$refs['svg'].setAttribute("viewbox",this.computedViewBox(this.item));
    }
	if(this.item.svgWidth){
	// debugger;
	 this.$refs['svg'].setAttribute("width",this.item.svgWidth);
	}
	if(this.item.svgHeight){ 
	this.$refs['svg'].setAttribute("height",this.item.svgHeight);
	}
	this.rotateStyle='cursor:url('+this.rotate+') 12 12, auto;';
	this.oldSelected =this.item.iselected;
	//绑定把柄的onmousedown事件
	var i;
	var handleObj;
	for(i=0;i<this.handlerList.length;i++){				
		handleObj = document.getElementById(this.handlerList[i]);
		//绑定鼠标事件
		if(handleObj){
			console.log('绑定把柄的handleDrag事件');
			//debugger;
			/*if(this.oldSelected==='1'){
				handleObj.setAttribute("onmousedown", "handleMouseDown(evt,'"+this.handlerList[i]+"')");
			}else{
				handleObj.setAttribute("onmousedown",null);
			}*/
			if(this.oldSelected === '1'){
				handleObj.ondrag = this.handleDrag;
				handleObj.ondragstart = this.handleDragStart;
			}else{
				handleObj.ondrag = null;
			}
		}	
	}

  },
  beforeDestroy() {
      clearInterval(this.timer);
  },
   data() {
    return {
	  inputCtrlVal:'',
	  isdesign:'',
	  switchFormItemClass:'',
	  timer:'',
	  oSvg:'',
	  halftHandleWidth:4,
	  halftHandleHeight:4,
	  rotate,
	  rotateStyle:'',
	  handlerList:[
	  {"handleType":"selectorGrip_resize_nw","x":0,"y":0},
	  {"handleType":"selectorGrip_resize_n" ,"x":0,"y":0},
	  {"handleType":"selectorGrip_resize_ne","x":0,"y":0},
	  {"handleType":"selectorGrip_resize_e" ,"x":0,"y":0},
	  {"handleType":"selectorGrip_resize_se","x":0,"y":0},
	  {"handleType":"selectorGrip_resize_s" ,"x":0,"y":0},
	  {"handleType":"selectorGrip_resize_sw","x":0,"y":0},
	  {"handleType":"selectorGrip_resize_w", "x":0,"y":0},
	  {"handleType":"selectorGrip_move", "x":0,"y":0},
	  ],
	  oldSelected:'',
	  clickedPt:{x:0,y:0},
	  objId:'',
	  handleType:'',
	  
	}
 },
 computed:{
  //计算连线节点箭头旋转属性
  computeLineRotate(){
	return function(item){
	   //计算最后两个点角度
	   if(item.polygon.length>1){
	        var pt1;
			var pt2;
			
			pt1 = item.polygon[item.polygon.length-1];
			pt2 = item.polygon[item.polygon.length-2];
			var angle = Math.atan2((pt1.y-pt2.y), (pt1.x-pt2.x));
			var theta = angle*(180/Math.PI);
			//rotate(angle[ x y])
			var retVal;
			retVal = "rotate("+theta+" "+pt1.x+","+pt1.y+")";
			return retVal;
	   }else{
		   return "";
	   }	   
	}
  },
  //计算连线节点选中框坐标
   computeLineNodeSelectedRect(){
		return function(item){
		var i=0;
		var lefttopx = 0 ;
		var lefttopy = 0;
		var rightdownx = 0;
		var rightdowny = 0;
        var retVal='';		
		for(i=0;i<item.polygon.length;i++){
			if(i==0){
			   lefttopx = item.polygon[i].x;
			   rightdownx = item.polygon[i].x;
			   lefttopy = item.polygon[i].y;
			   rightdowny = item.polygon[i].y;
			}else{
			   if(lefttopx>item.polygon[i].x){
				  lefttopx = item.polygon[i].x;
			   }
			   if(lefttopy>item.polygon[i].y){
				  lefttopy = item.polygon[i].y;
			   }
			   if(rightdownx<item.polygon[i].x){
				  rightdownx = item.polygon[i].x;
			   }
			   if(rightdowny<item.polygon[i].y){
				  rightdowny = item.polygon[i].y;
			   }
			}
		 }
		 
	     retVal = "M"+lefttopx+","+lefttopy+" L"+rightdownx+","+lefttopy+" "+rightdownx+","+rightdowny+" "+lefttopx+","+rightdowny+"z";
		 return retVal;
		}
   },
   //计算赋值节点选中框坐标属性
   computeAssignmentNodeSelectedRect(){
		return function (item){
	     var retVal;
		 var lefttopx = (item.position.x);
		 var lefttopy = (item.position.y);
		 var rightdownx = (item.position.x+item.assignmentNode.width);
		 var rightdowny = (item.position.y+item.assignmentNode.height);
		 
		 
	     retVal = "M"+lefttopx+","+lefttopy+" L"+rightdownx+","+lefttopy+" "+rightdownx+","+rightdowny+" "+lefttopx+","+rightdowny+"z";
	     console.log(retVal);
	     return retVal;
		}
		}, 
    //计算判断节点选中框坐标
   computeDecideNodeSelectedRect(){
		return function(item){
		 var retVal;
		 //retVal =item.polygon.leftx+","+item.polygon.lefty+" "+item.polygon.topx+","+item.polygon.topy+" "+item.polygon.rightx+","+item.polygon.righty+" "+item.polygon.bottomx+","+item.polygon.bottomy; 
		
		 //var width = (item.polygon.rightx - item.polygon.leftx)/2;
		 var height = (item.polygon.bottomy - item.polygon.topy)/2;
		 
		 var lefttopx = item.polygon.leftx ;
		 var lefttopy = item.polygon.lefty - height;
		 var rightdownx = item.polygon.rightx;
		 var rightdowny = item.polygon.bottomy;
		 
		 
	     retVal = "M"+lefttopx+","+lefttopy+" L"+rightdownx+","+lefttopy+" "+rightdownx+","+rightdowny+" "+lefttopx+","+rightdowny+"z";
		 return retVal;
		}
   },
   //计算循环节点选中框坐标
   computeLoopNodeSelectedRect(){
		return function(item){
		 //debugger;
		 var retVal;
		 //retVal= "M"+item.loopNode.startPt.x+" "+item.loopNode.startPt.y+" L"+item.loopNode.twoPt.x+" "+item.loopNode.twoPt.y+" L"+item.loopNode.threePt.x+" "+item.loopNode.threePt.y+" L"+(item.loopNode.endPt.x+5)+" "+item.loopNode.endPt.y
		 
		 var lefttopx = item.loopNode.startPt.x;
		 var lefttopy = item.loopNode.endPt.y-5;
		 var rightdownx = item.loopNode.twoPt.x;
		 var rightdowny = item.loopNode.twoPt.y;
		 
		 
	     retVal = "M"+lefttopx+","+lefttopy+" L"+rightdownx+","+lefttopy+" "+rightdownx+","+rightdowny+" "+lefttopx+","+rightdowny+"z";
		 return retVal;
		}
   },
   //计算循环节点选择框把柄坐标
   computeLoopNodeSelectedRectHandle(){
		return function (direction,xy,item){
		 var lefttopx = item.loopNode.startPt.x;
		 var lefttopy = item.loopNode.endPt.y-5;
		 var rightdownx = item.loopNode.twoPt.x;
		 var rightdowny = item.loopNode.twoPt.y;
		 var width =rightdownx - lefttopx;
		 var height = rightdowny - lefttopy;
		 let x,y;
		 x = -1;
		 y = -1;
		
		if(direction==='lefttop' ){
			if(xy==='x'){
			   x = lefttopx-this.halftHandleWidth;
			}else{
			   y = lefttopy-this.halftHandleHeight;
			}
			
		}else if(direction==='middletop'){
		    if(xy==='x'){
			   x = lefttopx+width/2-this.halftHandleWidth;
			}else{
			   y = lefttopy-this.halftHandleHeight;
			}
		}else if(direction==='righttop'){
			if(xy==='x'){
			   x = rightdownx-this.halftHandleWidth;
			}else{
			   y = lefttopy-this.halftHandleHeight;
			}		
		}else if(direction==='rightmiddle'){
			if(xy==='x'){
			   x = rightdownx-this.halftHandleWidth;
			}else{
			   y = lefttopy+height/2-this.halftHandleHeight;
			}
		}else if(direction==='rightdown'){
			if(xy==='x'){
			   x = rightdownx-this.halftHandleWidth;
			}else{
			   y = rightdowny-this.halftHandleHeight;
			}
		}else if(direction==='middledown'){
			if(xy==='x'){
			   x = lefttopx+width/2-this.halftHandleWidth;
			}else{
			   y = rightdowny  -this.halftHandleHeight;
			}
		}else if(direction==='leftdown'){
			if(xy==='x'){
			   x = lefttopx-this.halftHandleWidth;
			}else{
			   y = rightdowny-this.halftHandleHeight;
			}
		}else if(direction==='leftmiddle'){
			if(xy==='x'){
			   x = lefttopx-this.halftHandleWidth;
			}else{
			   y = lefttopy+height/2-this.halftHandleHeight;
			}
		}else if(direction==='center'){
		    if(xy==='x'){
			   x = lefttopx+width/2-this.halftHandleWidth;
			}else{
			   y = lefttopy+height/2-this.halftHandleHeight;
			}			
		}
		this.$emit("handlexy",direction,x,y);
		this.putHandlerListXY(direction,x,y);
		if(xy==='x'){
			return x;
		}else{
			return y;
		}		
	}
   },
  //计算赋值节点选择框把柄坐标
   computeAssignmentNodeSelectedRectHandle(){
		return function (direction,xy,item){
		 var lefttopx = (item.position.x);
		 var lefttopy = (item.position.y);
		 var rightdownx = (item.position.x+item.assignmentNode.width);
		 var rightdowny = (item.position.y+item.assignmentNode.height);
		 let x,y;
		 x = -1;
		 y = -1;
		if(direction==='lefttop' ){
			if(xy==='x'){
			   x = lefttopx-this.halftHandleWidth;
			}else{
			   y = lefttopy-this.halftHandleHeight;
			}
		}else if(direction==='middletop'){
		    if(xy==='x'){
			   x = item.position.x+item.assignmentNode.width/2-this.halftHandleWidth;
			}else{
			   y = lefttopy-this.halftHandleHeight;
			}
		}else if(direction==='righttop'){
			if(xy==='x'){
			   x = rightdownx-this.halftHandleWidth;
			}else{
			   y = lefttopy-this.halftHandleHeight;
			}		
		}else if(direction==='rightmiddle'){
			if(xy==='x'){
			   x = rightdownx-this.halftHandleWidth;
			}else{
			   y =  item.position.y+item.assignmentNode.height/2-this.halftHandleHeight;
			}
		}else if(direction==='rightdown'){
			if(xy==='x'){
			   x = rightdownx-this.halftHandleWidth;
			}else{
			   y = rightdowny-this.halftHandleHeight;
			}
		}else if(direction==='middledown'){
			if(xy==='x'){
			   x = item.position.x+item.assignmentNode.width/2-this.halftHandleWidth;
			}else{
			   y = rightdowny  -this.halftHandleHeight;
			}
		}else if(direction==='leftdown'){
			if(xy==='x'){
			   x = lefttopx-this.halftHandleWidth;
			}else{
			   y = rightdowny-this.halftHandleHeight;
			}
		}else if(direction==='leftmiddle'){
			if(xy==='x'){
			   x = lefttopx-this.halftHandleWidth;
			}else{
			   y =  item.position.y+item.assignmentNode.height/2-this.halftHandleHeight;
			}
		}else if(direction==='center'){
		    if(xy==='x'){
			   x = item.position.x+item.assignmentNode.width/2-this.halftHandleWidth;
			}else{
			   y =  item.position.y+item.assignmentNode.height/2-this.halftHandleHeight;
			}			
		}
		this.$emit("handlexy",direction,x,y);
		this.putHandlerListXY(direction,x,y);
		if(xy==='x'){
			return x;
		}else{
			return y;
		}		
	}
   },   
   //计算椭圆选择框把柄坐标
   computeEllipseSelectedRectHandle(){
		return function (direction,xy,item){
		 var lefttopx = (item.position.x-item.ellipse.rx);
		 var lefttopy = (item.position.y-item.ellipse.ry);
		 var rightdownx = (item.position.x+item.ellipse.rx);
		 var rightdowny = (item.position.y+item.ellipse.ry);
		 let x,y;
		 x = -1;
		 y = -1;
		 //this.$emit("putHandlerListXY",lefttopx-this.halftHandleWidth,-1);
		if(direction==='lefttop' ){
			if(xy==='x'){
			   x = lefttopx-this.halftHandleWidth;
			}else{
			   y = lefttopy-this.halftHandleHeight;
			}
		}else if(direction==='middletop'){
		    if(xy==='x'){
			   x =   item.position.x-this.halftHandleWidth;
			}else{
			   y = lefttopy-this.halftHandleHeight;
			}
		}else if(direction==='righttop'){
			if(xy==='x'){
			   x=  rightdownx-this.halftHandleWidth;
			}else{
			   y= lefttopy-this.halftHandleHeight;
			}		
		}else if(direction==='rightmiddle'){
			if(xy==='x'){
			   x=  rightdownx-this.halftHandleWidth;
			}else{
			   y= item.position.y-this.halftHandleHeight;
			}
		}else if(direction==='rightdown'){
			if(xy==='x'){
			   x=  rightdownx-this.halftHandleWidth;
			}else{
			   y= rightdowny-this.halftHandleHeight;
			}
		}else if(direction==='middledown'){
			if(xy==='x'){
			   x =  item.position.x-this.halftHandleWidth;
			}else{
			   y= rightdowny  -this.halftHandleHeight;
			}
		}else if(direction==='leftdown'){
			if(xy==='x'){
			   x=  lefttopx-this.halftHandleWidth;
			}else{
			   y= rightdowny-this.halftHandleHeight;
			}
		}else if(direction==='leftmiddle'){
			if(xy==='x'){
			   x=  lefttopx-this.halftHandleWidth;
			}else{
			   y= item.position.y-this.halftHandleHeight;
			}
		}else if(direction==='center'){
		    if(xy==='x'){
			   x=  item.position.x-this.halftHandleWidth;
			}else{
			   y= item.position.y-this.halftHandleHeight;
			}			
		}
		
        this.$emit("handlexy",direction,x,y);
		this.putHandlerListXY(direction,x,y);
		if(xy==='x'){
			return x;
		}else{
			return y;
		}
	}
   },
   //计算判断节点选择框把柄坐标
   computeDecideNodeSelectedRectHandle(){
		return function (direction,xy,item){
		 var width = (item.polygon.rightx - item.polygon.leftx);
		 var height = (item.polygon.bottomy - item.polygon.topy);
		 
		 var lefttopx = item.polygon.leftx ;
		 var lefttopy = item.polygon.lefty - height/2;
		 var rightdownx = item.polygon.rightx;
		 var rightdowny = item.polygon.bottomy;
		 let x,y;
		 x = -1;
		 y = -1;
		 
		 if(direction==='lefttop' ){
			if(xy==='x'){
			   x = lefttopx-this.halftHandleWidth;
			}else{
			   y = lefttopy-this.halftHandleHeight;
			}
			
		}else if(direction==='middletop'){
		    if(xy==='x'){
			   x = lefttopx+width/2-this.halftHandleWidth;
			}else{
			   y = lefttopy-this.halftHandleHeight;
			}
		}else if(direction==='righttop'){
			if(xy==='x'){
			   x = rightdownx-this.halftHandleWidth;
			}else{
			   y = lefttopy-this.halftHandleHeight;
			}		
		}else if(direction==='rightmiddle'){
			if(xy==='x'){
			   x = rightdownx-this.halftHandleWidth;
			}else{
			   y = lefttopy+height/2-this.halftHandleHeight;
			}
		}else if(direction==='rightdown'){
			if(xy==='x'){
			   x = rightdownx-this.halftHandleWidth;
			}else{
			   y = rightdowny-this.halftHandleHeight;
			}
		}else if(direction==='middledown'){
			if(xy==='x'){
			   x = lefttopx+width/2-this.halftHandleWidth;
			}else{
			   y = rightdowny  -this.halftHandleHeight;
			}
		}else if(direction==='leftdown'){
			if(xy==='x'){
			   x = lefttopx-this.halftHandleWidth;
			}else{
			   y = rightdowny-this.halftHandleHeight;
			}
		}else if(direction==='leftmiddle'){
			if(xy==='x'){
			   x = lefttopx-this.halftHandleWidth;
			}else{
			   y = lefttopy+height/2-this.halftHandleHeight;
			}
		}else if(direction==='center'){
		    if(xy==='x'){
			   x = lefttopx+width/2-this.halftHandleWidth;
			}else{
			   y = lefttopy+height/2-this.halftHandleHeight;
			}			
		}
	this.$emit("handlexy",direction,x,y);
	this.putHandlerListXY(direction,x,y);
		if(xy==='x'){
			return x;
		}else{
			return y;
		}		
	}
   },      
   //计算椭圆选中框坐标属性
   computeEllipseSelectedRect(){
		return function (item){
	     var retVal;
		 var lefttopx = (item.position.x-item.ellipse.rx);
		 var lefttopy = (item.position.y-item.ellipse.ry);
		 var rightdownx = (item.position.x+item.ellipse.rx);
		 var rightdowny = (item.position.y+item.ellipse.ry);
		 
		 
	     retVal = "M"+lefttopx+","+lefttopy+" L"+rightdownx+","+lefttopy+" "+rightdownx+","+rightdowny+" "+lefttopx+","+rightdowny+"z";
	     console.log(retVal);
	     return retVal;
		}
		},
  //计算椭圆填充风格  
  computedEllipseStyle(){
	  return   function(item){
	   //debugger;
	   console.log('computedEllipseStyle:'+item);
	   var retVal;
	   //debugger
	    //this.$emit("movehandler",'1','1',0,0);
	   retVal = "fill:"+item.ellipse.fill+";stroke:"+item.line.color+";stroke-width:"+item.line.width;
	   console.log(retVal);
	   return retVal;
	  }
  }
  ,
  //计算旋转属性
  computedRotate(){
    return function(item){
	//debugger;
	 console.log('computedRotate:'+item);
	var retVal = "rotate("+item.font.rotate.angle+","+item.font.rotate.x+","+item.font.rotate.y+")";
   
	return retVal;
  }
  },
  //计算多边形点列表
  computedDecideNodePoints(){
	  return function(item){
		var retVal;
		
		retVal =item.polygon.leftx+","+item.polygon.lefty+" "+item.polygon.topx+","+item.polygon.topy+" "+item.polygon.rightx+","+item.polygon.righty+" "+item.polygon.bottomx+","+item.polygon.bottomy; 
		console.log('computedDecideNodePoints:'+retVal);
		return retVal;
	  }
  },
  //计算多边形填充风格  
  computedPolygonStyle(){
   return function(item){
    //1  2  
	//debugger;
	 console.log('computedPolygonStyle:'+item);
	return "fill:"+item.polygon.fill+";stroke:"+item.line.color+";stroke-width:"+item.line.width;
  }
  },
  //计算循环节点路径的
  computedLoopNodePathD(){
    return function(item){
	 //debugger;
	 var retVal;
     retVal= "M"+item.loopNode.startPt.x+" "+item.loopNode.startPt.y+" L"+item.loopNode.twoPt.x+" "+item.loopNode.twoPt.y+" L"+item.loopNode.threePt.x+" "+item.loopNode.threePt.y+" L"+(item.loopNode.endPt.x+5)+" "+item.loopNode.endPt.y
     console.log('computedLoopNodePathD:'+retVal);
	 return retVal;
   }
  }
  ,
  //计算箭头路径
  computedArrowPathD(){
  return function(item){
   
  var retVal;
   retVal= "M"+(item.loopNode.endPt.x+20)+" "+(item.loopNode.endPt.y-5)+" L"+(item.loopNode.endPt.x)+" "+(item.loopNode.endPt.y)+" L"+(item.loopNode.endPt.x+20)+" "+(item.loopNode.endPt.y+5)+" L"+(item.loopNode.endPt.x+10)+" "+(item.loopNode.endPt.y)+" M"+(item.loopNode.endPt.x+20)+" "+(item.loopNode.endPt.y-5)+" z";
   console.log('computedArrowPathD:'+retVal);
   return retVal;
  }
  }
  ,
  //计算赋值节点方框风格  
  computedAssignmentNodeStyle(){
  return function(item){
  
     //debugger;
	  console.log('computedAssignmentNodeStyle:'+item);
     return "fill:"+item.assignmentNode.fill+";stroke:"+item.line.color+";stroke-width:"+item.line.width+";";
  }
  }
  ,
  //计算赋值节点文本x坐标
  computedAssignmentNodeTextX(){
    return function(item){
	 
	 var retVal;
	 let size = this.textSize(item.font.size,item.font.family,item.label);
	 retVal= item.position.x+item.assignmentNode.width/2-size.width/2
	 console.log('computedAssignmentNodeTextX:'+retVal);
	 return retVal;
  }
  }
  ,
  //计算赋值节点文本y坐标
  computedAssignmentNodeTextY(){
    return function(item){
	 console.log('computedAssignmentNodeTextY:'+item);
	 let size = this.textSize(item.font.size,item.font.family,item.label);
	 return item.position.y+(item.assignmentNode.height)/2-size.height/2;
  }
  }
  ,
   //计算连线节点选择框把柄坐标
   computeLineNodeSelectedRectHandle(){
		return function (direction,xy,item){
		var i=0;
		var lefttopx = 0 ;
		var lefttopy = 0;
		var rightdownx = 0;
		var rightdowny = 0	;		
		for(i=0;i<item.polygon.length;i++){
			if(i==0){
			   lefttopx = item.polygon[i].x;
			   rightdownx = item.polygon[i].x;
			   lefttopy = item.polygon[i].y;
			   rightdowny = item.polygon[i].y;
			}else{
			   if(lefttopx>item.polygon[i].x){
				  lefttopx = item.polygon[i].x;
			   }
			   if(lefttopy>item.polygon[i].y){
				  lefttopy = item.polygon[i].y;
			   }
			   if(rightdownx<item.polygon[i].x){
				  rightdownx = item.polygon[i].x;
			   }
			   if(rightdowny<item.polygon[i].y){
				  rightdowny = item.polygon[i].y;
			   }
			}
		 }
		 var width =rightdownx - lefttopx;
		 var height = rightdowny - lefttopy;
	
		if(direction==='lefttop' ){
			if(xy==='x'){
			   return  lefttopx-this.halftHandleWidth;
			}else{
			   return lefttopy-this.halftHandleHeight;
			}
			
		}else if(direction==='middletop'){
		    if(xy==='x'){
			   return  lefttopx+width/2-this.halftHandleWidth;
			}else{
			   return lefttopy-this.halftHandleHeight;
			}
		}else if(direction==='righttop'){
			if(xy==='x'){
			   return  rightdownx-this.halftHandleWidth;
			}else{
			   return lefttopy-this.halftHandleHeight;
			}		
		}else if(direction==='rightmiddle'){
			if(xy==='x'){
			   return  rightdownx-this.halftHandleWidth;
			}else{
			   return lefttopy+height/2-this.halftHandleHeight;
			}
		}else if(direction==='rightdown'){
			if(xy==='x'){
			   return  rightdownx-this.halftHandleWidth;
			}else{
			   return rightdowny-this.halftHandleHeight;
			}
		}else if(direction==='middledown'){
			if(xy==='x'){
			   return  lefttopx+width/2-this.halftHandleWidth;
			}else{
			   return rightdowny  -this.halftHandleHeight;
			}
		}else if(direction==='leftdown'){
			if(xy==='x'){
			   return  lefttopx-this.halftHandleWidth;
			}else{
			   return rightdowny-this.halftHandleHeight;
			}
		}else if(direction==='leftmiddle'){
			if(xy==='x'){
			   return  lefttopx-this.halftHandleWidth;
			}else{
			   return lefttopy+height/2-this.halftHandleHeight;
			}
		}else if(direction==='center'){
		    if(xy==='x'){
			   return  lefttopx+width/2-this.halftHandleWidth;
			}else{
			   return lefttopy+height/2-this.halftHandleHeight;
			}			
		}	
	}
   },
    //计算连线节点路径的
  computedLineNodePathD(){
    return function(item){
	 //debugger;
	 var retVal='';
	 var i=0;
	 console.log('enter computedLineNodePathD'); 
	 for(i=0;i<item.polygon.length;i++){
     //retVal= "M"+item.loopNode.startPt.x+" "+item.loopNode.startPt.y+" L"+item.loopNode.twoPt.x+" "+item.loopNode.twoPt.y+" L"+item.loopNode.threePt.x+" "+item.loopNode.threePt.y+" L"+(item.loopNode.endPt.x+5)+" "+item.loopNode.endPt.y
		if(i==0){
		   retVal= "M"+item.polygon[i].x+" "+item.polygon[i].y
		}else{
		   retVal= retVal+" L"+item.polygon[i].x+" "+item.polygon[i].y
		}
	 }
	 console.log('computedLineNodePathD:'+retVal);

	 return retVal;
   }
  }
  ,
  //计算连线箭头路径
  computedLineNodeArrowPathD(){
  return function(item){
   var retVal='';
   if(item.polygon.length>0){
    var endPt={"x":item.polygon[item.polygon.length-1].x,"y":item.polygon[item.polygon.length-1].y}
	//如果结束点+20 >50，则-20；否则+20
	  
      retVal= "M"+(endPt.x-20)+" "+(endPt.y-5)+" L"+(endPt.x)+" "+(endPt.y)+" L"+(endPt.x-20)+" "+(endPt.y+5)+" L"+(endPt.x-10)+" "+(endPt.y)+" M"+(endPt.x-20)+" "+(endPt.y-5)+" z";
  
   }
   console.log('computedArrowPathD:'+retVal);
   return retVal;
  }
  },
  //计算判断框文本的位置
  computedTextPosition(){
    return function(item,xy){
	  //debugger; 
	   var lefttopx = item.polygon.leftx ;
		 var lefttopy = item.polygon.lefty - height/2;
		 var width = (item.polygon.rightx - item.polygon.leftx);
		 var height = (item.polygon.bottomy - item.polygon.topy);
	  ////获取文本长宽
	  let size = this.textSize(item.font.size,item.font.family,item.label);
	  if(xy==="x"){
		//return item.polygon.leftx+(item.polygon.rightx-item.polygon.leftx)/2-size.width/2;
		return lefttopx+width/2-size.width/2;
	  }else{
	    //return item.polygon.bottomy -((item.polygon.bottomy-item.polygon.topy)/2-size.height/2)-size.height;
		return  item.polygon.topy+height/2-size.height/2;
	  }
	}
  }  
 }
 ,
  methods: {
    //放入到handlerList x y
    putHandlerListXY(hType,xValue,yValue){
	  //debugger;
	  //console.log('enter putHandlerListXY');
	  var i;
	  var el={"handleType":hType,"x":xValue,"y":yValue};
	 
	  for(i=0;i<this.item.handlerList.length;i++){				
		if(this.item.handlerList[i].handleType===hType){
			if(xValue>=0){
				this.item.handlerList[i].x = xValue;
			}
			if(yValue>=0){
				this.item.handlerList[i].y = yValue;
			}
			return;
		}
	  }
	  //没有找到，加入数组
	  this.item.handlerList.push(el);
    },
    //uuid
	uuid() {
		var s = [];
		var hexDigits = '0123456789abcdef';
		for (var i = 0; i < 36; i++) {
			s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
		}
		s[14] = '4';
		s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
		s[8] = s[13] = s[18] = s[23] = '-';
		this.uuidA = s.join('');
		//console.log(s.join(''), 's.join("")');
		return this.uuidA;
    },
   
   computedViewBox(item){
	  if(item.viewBox){
	    var retVal;
		retVal=item.viewBox.minx+" "+item.viewBox.miny+" "+item.viewBox.width+" "+item.viewBox.height;
		console.log("viewBox:"+retVal);
		return retVal;
	  }else{
	    return "";
	  }	  
  },
    handleChange(key) {
	  debugger;
	  console.log('value:'+this.inputCtrlVal);
      // change事件
      this.$emit("change",this.inputCtrlVal, key);
	  //$event.target.value,
    },
	//改变属性值
	changeProperty(){
		//如果选择状态发生变化
		if(this.oldSelected!=this.item.iselected){
			this.oldSelected = this.item.iselected;
			
				//绑定把柄的onmousedown事件
				var i;
				var handleObj;
				for(i=0;i<this.handlerList.length;i++){				
					handleObj = document.getElementById(this.handlerList[i]);
					//绑定鼠标事件
					if(handleObj){
						console.log('绑定把柄的onmousedown事件');
						//debugger;
						/*if(this.oldSelected==='1'){
							handleObj.setAttribute("onmousedown", "handleMouseDown(evt,'"+this.handlerList[i]+"')");
						}else{
							handleObj.setAttribute("onmousedown",null);
						}*/
						if(this.oldSelected === '1'){
							handleObj.setAttribute("ondrag","handleDrag(evt,'"+this.handlerList[i]+"')");
						}else{
						    handleObj.setAttribute("ondrag",null);
						}
					}	
				}			
		}
    },
	
	 // svg图元件点击事件
   svgClick(evt, id) {
      console.log(evt);
	  this.$emit("click",evt,id);
      //alert(id);
   },
   handleDragStart(evt){
	console.log("handleDragStart:"+evt);
   },
   //把柄拖拽事件
   handleDrag(evt){
	 console.log("handleDrag:"+evt);
	},
	//把柄按下事件
	handleMouseDown(evt,id){
	 console.log("handleMouseDown:"+evt+","+id);
	 let handleObj = document.getElementById(id);
	 //绑定鼠标移动和释放事件
	 if(handleObj){
	    console.log('bind onmousemove onmouseup');
		this.clickedPt.x = evt.x;
		this.clickedPt.y = evt.y;
		this.objId = this.item.id;
		this.handleType = id;
		//handleObj.setAttribute("onmousemove", "handleMouseMove(evt,'"+id+"')");
		//document.setAttribute("onmouseup", "handleMouseUp(evt,'"+id+"')");
		//document.onmouseup = this.handleMouseUp;
		//document.onmousemove = this.handleMouseMove;
	 }
	},
	//把柄移动事件
	handleMouseMove(evt){
	  //console.log("handleMouseMove:"+evt);
	  let dx = evt.x-this.clickedPt.x;
	  let dy = evt.y - this.clickedPt.y;
	 
	  this.$emit("movehandler",this.item.id,this.handleType,dx,dy);
	},
	//把柄按键释放事件
	handleMouseUp(evt,id){
	  console.log("handleMouseUp:"+evt+","+id);
	  document.onmousemove = null;
	  document.onmouseup = null;
	},
	//计算文本宽高
	textSize (fontSize, fontFamily, text) {
	  var span = document.createElement('span')
	  var dom = document.createElement('div')
	  dom.style.width = '100%'
	  dom.style.height = '10px'
	  dom.style.overflow = 'hidden'
	  var result = {}
	  result.width = span.offsetWidth
	  result.height = span.offsetHeight
	  span.style.visibility = 'hidden'
	  span.style.fontSize = fontSize
	  span.style.fontFamily = fontFamily
	  span.style.display = 'inline-block'
	  dom.appendChild(span)
	  document.body.appendChild(dom)
	  if (typeof span.textContent !== 'undefined') {
		span.textContent = text
	  } else {
		span.innerText = text
	  }
	  result.width = parseFloat(window.getComputedStyle(span).width) - result.width
	  result.height = parseFloat(window.getComputedStyle(span).height) - result.height
	  return result
	}
}
};
</script>
<style  scoped>
.el-form-item__label {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.el-form-item__content_design {
  line-height: 40px;
  position: relative;
  font-size: 14px;
  pointer-events: none;
}
.el-form-item__content{
  line-height: 40px;
  position: relative;
  font-size: 14px;
}
</style>
